<template>
  <div class="CeremonyHall  h100" v-loading="loading">
    <div class="PageContent">
      <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="80px" class="PageItem margintop20">
        <el-row :gutter="11" class="fileSearch">
          <el-form-item label="墓穴类型:" prop="name">
            <el-input v-model="ruleForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="btnRight.btnCremationTypeSearch" type="primary"  @click="onSubmit('search')">
              查询
            </el-button>
            <el-button v-if="btnRight.btnCremationTypeReset" icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-row>
        <el-row :gutter="11">
          <el-form-item>
            <el-button v-if="btnRight.btnCremationTypeAdd" type="primary" icon="el-icon-plus"  @click="showGraveTypeAddDialog">
              新增类型
            </el-button>
          </el-form-item>
        </el-row>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          :height="tableHeight">
          <el-table-column
            type="index"
            label="编号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="name"
            align='center'
            label="类型名称">
          </el-table-column>
          <el-table-column
            prop="area"
            align='center'
            label="墓穴面积">
          </el-table-column>
          <el-table-column
            prop="price"
            align='center'
            label="墓穴单价">
          </el-table-column>
          <el-table-column
            prop="remark"
            align='center'
            label="备注">
          </el-table-column>
          <el-table-column label="操作" align="center" width="200px">
            <template slot-scope="scope">
              <el-button v-if="btnRight.btnCremationTypeEdit" type="text" @click="editGraveTypeDialog(scope.row)">编辑</el-button>
              <el-button v-if="btnRight.btnCremationTypeDelete" type="text" @click="deleteGraveTypeDialog(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div style="text-align: center;
                    height: 0px;
                    line-height: 20px;
                    font-size: 18px;">
          显示{{ pager.total === 0 ? 0 : (Math.ceil(pager.total / pager.pageSize) > 1 ? ((pager.currentPage - 1) * pager.pageSize + 1) : (1)) }}到{{ pager.total === 0 ? 0 : ((Math.ceil(pager.total / pager.pageSize) === pager.currentPage) ? (pager.total) : (pager.currentPage * pager.pageSize)) }}条
        </div> -->
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            :page-sizes="[10,20,30,50]"
            background
            layout="total,sizes,prev, pager, next, jumper"
            :total="pager.total">
          </el-pagination>
        </p>
      </el-form>

      <!-- 新增弹窗 -->
      <graveTpeyAddDialog
        :dialogVisible="graveTpeyAddDialog.dialogVisible"
        :roomData="graveTpeyAddDialog.roomData"
        @dialogCancle="dialogCancle"
      ></graveTpeyAddDialog>
      <!-- 编辑弹窗 -->
      <graveTypeEditDialog
        :dialogVisible="graveTypeEditDialog.dialogVisible"
        :room="graveTypeEditDialog.room"
        @dialogCancle="editDialogCancle"
      ></graveTypeEditDialog>
    </div>
  </div>
</template>

<script>
  import * as Type from '@/api/cemetery/cemetery'
  import graveTpeyAddDialog from "./graveType_add_dialog";
  import graveTypeEditDialog from "./gravetype_edit_dialog";

  export default {
    name: "GraveType",
    data() {
      return {
        loading: false,
        type: [],
        ruleForm: {
          name: "" //墓穴类型
        },
        pager: {
          "pageSize": 20,
          "total": 1,
          "currentPage": 1
        },
        tableData: [],
        dictionary: {},
        tableHeight: 0,
        //按钮权限
        btnRight: {
          btnCremationTypeSearch: false, //查询
          btnCremationTypeReset: false, //查询
          btnCremationTypeAdd: false, //查询
          btnCremationTypeEdit: false, //查询
          btnCremationTypeDelete: false, //查询

        },
        graveTpeyAddDialog: {
          dialogVisible: false,
          roomData: {}
        },
        graveTypeEditDialog: {
          dialogVisible: false,
          room: {}
        }
      }
    },
    components: {
      graveTpeyAddDialog,
      graveTypeEditDialog
    },
    //载入按钮
    mounted() {
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (var key of Object.keys(this.btnRight)) {
        this.btnRight[key] = (this.btnRight[key] || this.btnRight[key] == "true") ? true : false;
      }

      // this.$store.dispatch('user/getdictionary').then((res) => {     //获取字典数据
      //   this.dictionary = res;
      //   this.$set(this.dictionary, res)
      // }).catch(() => console.log('promise catch err'))
      // this.defaultValue();
      this.onSubmit()
      var that = this
      window.onresize = function () {
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        that.tableHeight = dom - search - 190
      }
    },
    //注销window.onresize事件
    destroyed() {
      window.onresize = null;
    },
    updated() {
      this.$nextTick(() => {
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        this.tableHeight = dom - search - 190
      })
    },
    methods: {
      //默认初始值方法
      defaultValue() {},

      onSubmit(value) {
        this.loading = true
        if (value) {
          this.pager.currentPage = 1;
        }
        var postData = {
           "name": this.ruleForm.name,
          "pageSize": this.pager.pageSize,
          "currentPage": this.pager.currentPage,
          "orderField	": "",     //排序字段
          "orderType": ""        //排序顺序
        }
        // const data = {
        //   pager:{
        //     total: 12,
        //     currentPage:1,
        //     pageSize:10
        //   },
        //   list:[
        //     {
        //       remark:'123'
        //     }
        //   ]
        // }
        //查询接口
        Type['getGraveType'](postData).then(response => {
          //console.log(response)
          const {data} = response;
          if (!data) {
            this.loading = false;
            this.$message('数据读取失败')
            return
          }
          // console.log(data)
          this.tableData = data.list
          this.pager = data.pager
          this.loading = false
          //数据读取成功
        }).catch(error => {
          this.$message(error)
          this.loading = false
          this.tableData = []
        })
      },

      deleteGraveTypeDialog(row) {
        let message = "确认删除墓穴类型为：" + row.name+ " ?";
        let postData = {
          "id": row.id
        }
        //console.log(postData.id)
        this.$confirm(message, "提示", {})
          .then(() => {
            Type['deleteGraveType'](postData).then(res => {
                this.$message({
                  message: res.message,
                  type: "success"
                });
                this.onSubmit();
              })
              .catch(res => {});
          })
          .catch(() => {});
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.$refs["ruleForm"].resetFields();
        this.onSubmit();
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pagesize = size;
        this.onSubmit()
      },
      handleCurrentChange: function (currentPage) {
        this.pager.currentPage = currentPage;
        this.onSubmit()  //点击第几页
      },

      // 新增墓穴类型弹窗
      showGraveTypeAddDialog() {
        this.graveTpeyAddDialog.dialogVisible = true;
        this.graveTpeyAddDialog.roomData = {};
      },
      //编辑墓穴类型
      editGraveTypeDialog(row) {
        this.graveTypeEditDialog.dialogVisible = true;
        this.graveTypeEditDialog.room = row;
      },
      //关闭所有弹窗
      dialogCancle() {
        this.onSubmit();
        //
        this.graveTpeyAddDialog.dialogVisible = false;
        this.graveTpeyAddDialog.roomData = {};
      },
      editDialogCancle() {
        this.graveTypeEditDialog.dialogVisible = false;
        this.graveTypeEditDialog.room = {};
        this.onSubmit();
      }

    }
  }
</script>

<style scoped>

  .w150 {
    width: 150px;
  }
</style>
